<template>
	<div>
		<div v-for="(item, index) in localProps" :key="index">
			<div class="widget-config">{{ item.label }}</div>
			<div class="marginB10 flexDiv">
				<div>选择组件</div>
				<y-select :options="options" v-model="item.componentId" style="width: 200px" @change="onChange"></y-select>
			</div>
		</div>
		<div class="textCenter">
			<y-button :showIcon="false" :width="120" :text="confirmButtonText" @click="onConfirm" :hollow="true"></y-button>
		</div>
	</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
	name: 'YSelectComponent',
	data() {
		return {
			options: [],
			nowElement: '',
			activeNames: '',
			localProps: [],
			confirmButtonText: '确认提交',
		}
	},
	computed: {
		...mapGetters(['projectDataInfo', 'activeElementUUID', 'activeElement']),
		...mapState({
			projectDataState: state => state.powereditor.projectDataInfo,
		}),
	},
	methods: {
		onChange(v) {},
		onConfirm() {
			let projectDataInfo = this.projectDataState.pages[0].elements
			let index = projectDataInfo.findIndex(element => {
				return element.uuid === this.activeElementUUID
			})
			projectDataInfo[index].props[1].fields[0].value.dataJson.json = JSON.stringify(this.localProps)
			this.$store.dispatch('setProjectDataInfo', this.projectDataState)
		},
	},
	watch: {
		projectDataInfo: {
			handler: function (val) {
				let projects = (val.pages && val.pages[0] && val.pages[0].elements) || []
				let options = projects.filter(item => {
					return item.uuid !== this.activeElementUUID
				})
				this.options = options.map(item => {
					return {
						label: item.name,
						value: item._id,
					}
				})
			},
			deep: true,
			immediate: true,
		},
		activeElement: {
			handler: function (val) {
				let props =
					(val && val.props[1] && val.props[1].fields[0] && val.props[1].fields[0].value.dataJson.json) || '[]'
				this.localProps = JSON.parse(props)
				this.localProps.forEach(element => {
					if (!element.componentId) {
						this.$set(element, 'componentId', '')
					}
				})
			},
			deep: true,
			immediate: true,
		},
		activeElementUUID: {
			handler: function (val) {
				this.nowElement = val
			},
			immediate: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.widget-config {
	color: #eee;
	// background: #1d1e1f;
	transition: all 0.3s ease;
	overflow: hidden;
	line-height: 25px;
	padding-left: 10px;
	font-size: 15px;
}
.flexDiv {
	display: flex;
	align-items: center;
	div:nth-child(1) {
		margin-right: 10px;
		margin-left: 11px;
	}
}
::v-deep {
	.hollow {
		margin: 0 auto;
	}
}
</style>
